<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>04_浮动后的影响</title>
    <style>
      .outer {
        width: 500px;
        background-color: gray;
        border: 1px solid black;
      }
      .box {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        border: 1px solid black;
        margin: 10px;
      }
      .box1,
      .box2,
      .box3 {
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="box box0">0</div>
      <div class="box box1">1</div>
      <div class="box box2">2</div>
      <div class="box box3">3</div>
    </div>

    <!-- <div style="background-color: orange">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum unde
      placeat deserunt cumque vero, recusandae laborum vel deleniti fugiat cum
      itaque dicta, neque at et molestias beatae animi expedita voluptatem
      veniam reprehenderit eum. Tempore nesciunt quaerat esse molestias, at
      molestiae dignissimos corporis! Nemo facere eius molestias saepe sunt,
      ducimus ea laboriosam harum suscipit accusamus eos dicta placeat
      accusantium, reiciendis atque sapiente explicabo nihil. Beatae nam
      perspiciatis commodi autem eligendi numquam cupiditate repellendus natus
      enim labore accusantium laudantium temporibus amet, similique vel omnis
      aperiam saepe. Totam explicabo enim molestiae excepturi voluptatum, sit
      maiores sequi nulla, esse earum assumenda natus numquam quia! Lorem ipsum
      dolor sit amet consectetur adipisicing elit. Harum unde placeat deserunt
      cumque vero, recusandae laborum vel deleniti fugiat cum itaque dicta,
      neque at et molestias beatae animi expedita voluptatem veniam
      reprehenderit eum. Tempore nesciunt quaerat esse molestias, at molestiae
      dignissimos corporis! Nemo facere eius molestias saepe sunt, ducimus ea
      laboriosam harum suscipit accusamus eos dicta placeat accusantium,
      reiciendis atque sapiente explicabo nihil. Beatae nam perspiciatis commodi
      autem eligendi numquam cupiditate repellendus natus enim labore
      accusantium laudantium temporibus amet, similique vel omnis aperiam saepe.
      Totam explicabo enim molestiae excepturi voluptatum, sit maiores sequi
      nulla, esse earum assumenda natus numquam quia!
    </div> -->
  </body>
</html>
